<!-- components/BasicInfoForm.vue -->
<template>
  <div>
    <el-form-item
      :label="isMobile ? '' : '姓名'"
      prop="name"
      :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
    >
      <el-input 
        v-model="formData.name" 
        :placeholder="isMobile ? '姓名' : '请输入姓名'"
        :size="isMobile ? 'large' : 'default'"
      ></el-input>
    </el-form-item>
    <el-form-item
      :label="isMobile ? '' : 'ID'"
      prop="id"
      :rules="[{ required: true, message: '请输入ID', trigger: 'blur' }]"
    >
      <el-input 
        v-model="formData.id" 
        :placeholder="isMobile ? 'ID' : '请输入ID'"
        :size="isMobile ? 'large' : 'default'"
        @input="handleIdChange"
      ></el-input>
    </el-form-item>
    <el-divider />
  </div>
</template>

<script setup>
const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  isMobile: {
    type: Boolean,
    default: false,
  },
});

// ID变化时不需要特殊处理，因为我们在index.vue中使用了副本
const handleIdChange = () => {
  // 这里可以添加ID格式验证等逻辑
  console.log('ID changed to:', props.formData.id);
};
</script>

<style scoped>
/* 移动端优化 */
:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

@media (max-width: 768px) {
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
  
  :deep(.el-input) {
    font-size: 16px; /* 防止iOS缩放 */
  }
}
</style>